<!DOCTYPE html>
          <head>
        <meta charset="utf-8">
            
            <title>
                「Android」从浏览器中打开我们的应用 | ttdevs
            </title>
            <meta content="width=device-width, initial-scale=1" name="viewport">
            <meta name="theme-color" content="#4184f3">
            
            
            <link href="/favicon.ico" rel="icon"/>
            

            <link rel="stylesheet" href="/css/highlight.light.css">
            <link rel="stylesheet" href="/css/prism-customize.css">
            <link rel="stylesheet" href="/css/nav-icon.css">
            <link rel="stylesheet" href="/css/waves.min.css">
            <link rel="stylesheet" href="/css/jquery.tocify.css">
            <link rel="stylesheet" href="/css/main.css">
            <link rel="stylesheet" href="/css/nav-indicator.css">
            
  

  
  <!-- 谷歌统计 -->
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-97465173-1', 'auto');
    ga('send', 'pageview');

  </script>
  
            </meta>
        </meta>
    </head>

    <body>
        <header>
            <!-- cover image or sth. -->
        </header>
        <div id="main" class="m-scene">
            
<div class="nav-wrapper">

    <div class="container">
        <nav>
            <div class="logo wave">
                <a href="/" id="logo">
                    ttdevs
                </a>
            </div>
            <div class="nav-toggle-icon" >
                <div class="material-hamburger">
                    <span>
                    </span>
                    <span>
                    </span>
                    <span>
                    </span>
                </div>
            </div>
            <div class="menu-wrapper">
                <div class="nav-indicator">
                </div>
                <ul class="menus">
                    
                     
                        <li>
                            <a class="wave " href="/">
                                首页
                            </a>
                        </li>
                     
                        <li>
                            <a class="wave " href="/archives">
                                归档
                            </a>
                        </li>
                     
                        <li>
                            <a class="wave " href="/about">
                                关于
                            </a>
                        </li>
                     
                    
                   
                </ul>
            </div>
        </nav>
    </div>
</div>
            <div class="container content">
                <div class="scene_element scene_element--fadein">
                    <div class="row">
    <div class="main">
        <article>
          
          <header class="post-header with-cover" style="background-image:url('/1970/01/01/[Android]从浏览器中打开我们的应用/cover.jpg')" >
          
          </header>
          <h1 class="post-title">「Android」从浏览器中打开我们的应用</h1>

          <section class="post-info">
            <span class="post-date">1970/01/01</span>
            
            <span class="post-category">
                <a class="article-category-link" href="/categories/技术/">技术</a>
            </span>
            
            
            <span class="post-tags">
              <ul class="post-tag-list"><li class="post-tag-list-item"><a class="post-tag-list-link" href="/tags/Android/">Android</a></li></ul>
            </span>
            
          </section>

          <section class="post-content">
            <h2 id="0x01-需求"><a href="/1970/01/01/[Android]从浏览器中打开我们的应用/#0x01-需求" class="headerlink" title="0x01 需求"></a>0x01 需求</h2><p>有时候你会发现，用Android系统自带的浏览器（chrome）打开一个web页面，如果安装了相应的App，就会自动打开这个App并进入具体的界面中，比如手机上打开：</p>
<p><code>https://www.zhihu.com/openinapp_instruction?app-id=432274380&amp;app-argument=zhihu://questions/24122524</code></p>
<p>如果我们安装了知乎手机客户端，这个时候会自动打开知乎手机客户端，并且进入问题展示界面。还比如网易云音乐，今日头条等等App都是支持这个功能的。之前我们自家App的分享都是打开一个App介绍的界面，即使安装了手机客户端，也不会自动打开手机客户端。为了追求更好的体验，我们需要实现这个功能。</p>
<h2 id="0x01-Chrome浏览器"><a href="/1970/01/01/[Android]从浏览器中打开我们的应用/#0x01-Chrome浏览器" class="headerlink" title="0x01 Chrome浏览器"></a>0x01 Chrome浏览器</h2><p>研究这个功能，还是查阅了不少资料，比如 app link、deep link、chrome browser等等，如果紧紧是实现上面介绍的功能，还是 so easy的，仅仅需要了解 <code>Chrome</code> 浏览器 创建 Intent 的方法即可。</p>
<p>Chrome构造一个 Intent 的基本语法如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">intent:</div><div class="line">   HOST/URI-path // Optional host </div><div class="line">   #Intent; </div><div class="line">      package=[string]; </div><div class="line">      action=[string]; </div><div class="line">      category=[string]; </div><div class="line">      component=[string]; </div><div class="line">      scheme=[string]; </div><div class="line">   end;</div></pre></td></tr></table></figure>
<p>根据上面的语法，我们来看一个demo：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">intent:</div><div class="line">   //article/51348656</div><div class="line">   #Intent; </div><div class="line">      package=com.ttdevs.android; </div><div class="line">      scheme=ttdevs; </div><div class="line">   end;</div></pre></td></tr></table></figure>
<p>可以使用下面的 html 代码触发这个事件：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"intent://article/51348656/#Intent;scheme=ttdevs;package=com.ttdevs.android;end"</span>&gt;</span>ttdevs<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div></pre></td></tr></table></figure>
<p>另外还有个参数：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">S.browser_fallback_url=[encoded_full_url]</div></pre></td></tr></table></figure>
<p>介绍如下（不过我没搞明白）：</p>
<blockquote>
<p>When an intent could not be resolved, or an external application could not be launched, then the user will be redirected to the fallback URL if it was given.<br>Some example cases where Chrome does not launch an external application are as follows:</p>
<ul>
<li>The intent could not be resolved, i.e., no app can handle the intent.</li>
<li>JavaScript timer tried to open an application without user gesture.<br>Note that S.<name> is a way to define string extras. S.browser_fallback_url was chosen for backward compatibility, but the target app won’t see browser_fallback_url value as Chrome removes it.</name></li>
</ul>
</blockquote>
<h2 id="0x02-App内处理浏览器发来的Intent"><a href="/1970/01/01/[Android]从浏览器中打开我们的应用/#0x02-App内处理浏览器发来的Intent" class="headerlink" title="0x02 App内处理浏览器发来的Intent"></a>0x02 App内处理浏览器发来的Intent</h2><p>通过上面的介绍，如果我们点击链接，就会触发一个 Intent，有了Intent，我们还需要来处理它。在 <code>AndroidManifest.xml</code> 中相应的 Activity 中的配置中添加如下filter：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">intent-filter</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">action</span> <span class="attr">android:name</span>=<span class="string">"android.intent.action.VIEW"</span>/&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">category</span> <span class="attr">android:name</span>=<span class="string">"android.intent.category.DEFAULT"</span>/&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">category</span> <span class="attr">android:name</span>=<span class="string">"android.intent.category.BROWSABLE"</span>/&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">data</span> <span class="attr">android:host</span>=<span class="string">"article"</span> <span class="attr">android:pathPattern</span>=<span class="string">"/.*"</span> <span class="attr">android:scheme</span>=<span class="string">"ttdevs"</span>/&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">intent-filter</span>&gt;</span></div></pre></td></tr></table></figure>
<p>同时在Activity中处理Intent：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">RouterActivity</span> <span class="keyword">extends</span> <span class="title">BaseActivity</span> </span>&#123;</div><div class="line"></div><div class="line">    <span class="meta">@Override</span></div><div class="line">    <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onCreate</span><span class="params">(Bundle savedInstanceState)</span> </span>&#123;</div><div class="line">        <span class="keyword">super</span>.onCreate(savedInstanceState);</div><div class="line">        setContentView(R.layout.activity_router);</div><div class="line"></div><div class="line">        handleIntent(getIntent());</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    <span class="function"><span class="keyword">private</span> <span class="keyword">void</span> <span class="title">handleIntent</span><span class="params">(Intent intent)</span> </span>&#123;</div><div class="line">        String action = intent.getAction();</div><div class="line">        String data = intent.getDataString();</div><div class="line">        LogUtils.debug(action);</div><div class="line">        LogUtils.debug(data);</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>运行上面的代码，同时用系统浏览器打开上面的html，点击链接，即可调起我们的app。或者也可以通过下面的adb命令触发：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">adb shell am start \</div><div class="line">-a android.intent.action.VIEW \</div><div class="line">-c android.intent.category.BROWSABLE \</div><div class="line">-d &quot;ttdevs://article/12345&quot; com.ttdevs.android</div></pre></td></tr></table></figure>
<p>在我的设备（魅族MX4 Pro）上，如果没有安装处理这个 Intent 的App，则会打开系统自带的应用市场。</p>
<p>对于一个提供查询食物数据的App，如果我们分享出去的食物信息带上了相关的参数，在用户点击分享链接时，如果安装了我们的App则可以跳到App中展示食物的界面，如果没有安装，则会跳到应用市场下载，很好的逻辑～～</p>
<h2 id="0xFF-参考"><a href="/1970/01/01/[Android]从浏览器中打开我们的应用/#0xFF-参考" class="headerlink" title="0xFF 参考"></a>0xFF 参考</h2><ul>
<li><a href="https://developer.chrome.com/multidevice/android/intents" target="_blank" rel="external">https://developer.chrome.com/multidevice/android/intents</a></li>
</ul>
<p><img src="https://raw.githubusercontent.com/ttdevs/ttdevs.github.io/common/images/logo.png" alt="Create by ttdevs"></p>

          </section>
        </article>
        

       
        <div class="pager">
          
            <a class="post-prev pager-item" href="/1970/01/01/[Android]LayoutInflate遇到的坑/" >
              <strong class="article-nav-caption">上一篇</strong>
              <p class="post-nav-title">「Android」LayoutInflate遇到的坑</p>
            </a>
          
          
            <a class="post-next pager-item" href="/1970/01/01/[Android]使用VideoView和MediaController进行视频播放/">
              <strong class="article-nav-caption">下一篇</strong>
              <p class="post-nav-title">「Android」使用VideoView和MediaController进行视频播放</p>
            </a>
          
        </div>
        

         <!-- comments -->
        <div class="comment-section">
  
    


</div>

    </div>
    
    <aside>
        <div id="toc">
        </div>
    </aside>
    
</div>

                </div>
            </div>
        </div>
        <footer class="footer">
    <p>由<a href="http://hexo.io/" target="_blank">Hexo</a>强力驱动，搭载<a href="https://github.com/wayou/hexo-theme-gstyle">gstyle</a>主题</p>
    <p>
        &copy; 2017 ttdevs
    </p>
</footer>
<script src="/lib/jquery.js"></script>
<script src="/lib/waves.js"></script>
<script src="/lib/jquery-ui.js"></script>
<script src="/lib/jquery.tocify.js"></script>
<script src="/js/main.js"></script>

    </body>
</html>
